<template>
  <div id="pdfDom">
    <div class="cover" :class="{hide: hideCover}" :style="{display: coverState}">
      <div class="coverInner">
        <img src="../assets/img/coverTitle.png" class="coverInnerImg">
        <div class="coverBd">
          <div class="coverWrap" @click="showPlanContent">
            <i class="coverWrapBtn">亲启</i>
            <p>敬呈 {{($route.query.name||'') + ' ' + ($route.query.sex ? namedObj[$route.query.sex] : '')}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="planContent">
      <div class="header">
        <div class="headerImg"></div>
        <!--<img src="../assets/img/header.jpg">-->
      </div>
      <div class="person">
        <div class="insured-total insured-peoples">
          <div class="item cell-box">
            <div class="cell-hd">被保人</div>
            <div class="cell-bd">
              <span>{{sexObj[prdInfo.insure.sex] + prdInfo.insure.age}}岁</span>
            </div>
          </div>
          <div class="item cell-box">
            <div class="cell-hd">投保人</div>
            <div class="cell-bd">
              <span>{{sexObj[prdInfo.holder.sex] + prdInfo.holder.age}}岁</span>
            </div>
          </div>
          <div class="item cell-box">
            <div class="cell-hd">首年保费</div>
            <div class="cell-bd">
              <span>{{prdInfo.premium}}元</span>
            </div>
          </div>
        </div>
        <div class="fd">
          <div class="instable">
            <div class="row after-bd-b">
              <div class="cell after-bd-r">投保险种</div>
              <div class="cell after-bd-r">保额(元)/份数</div>
              <div class="cell after-bd-r">保险期/缴费期</div>
              <div class="cell after-bd-r">首年保费(元)</div>
            </div>
            <div class="row after-bd-b" v-for="(item, index) of simpleInsuranceTypeList" :key="index">
              <div class="cell after-bd-r">{{item.pName}}</div>
              <div class="cell after-bd-r" v-if="item.pid !== 'P0010' && item.pid !== 'P0013' && item.pid !== 'P0012' && item.pid !== 'P0014'">{{item.premium}}</div>
              <div class="cell after-bd-r" v-else-if="item.pid === 'P0010'">
                <p v-for="(item2, index2) in item.transportListData" :key="index2">
                  <span>{{`${item2.name}`}}</span><br><span>{{`${item2.premium}`}}</span>
                </p>
              </div>
              <div class="cell after-bd-r" v-else-if="item.pid === 'P0012'">{{item.premium + '份'}}</div>
              <div class="cell after-bd-r" v-else>{{planObj[item.premium]}}</div>
              <div class="cell after-bd-r" v-if="item.pid === 'P0007' || item.pid === 'P0008'">{{insuranceObj[item.insurancePeriod] + '/' + item.paymentPeriod}}</div>
              <div class="cell after-bd-r" v-else>1年期/1年交</div>
              <div class="cell after-bd-r">{{item.insuredAmount.toFixed(2)}}</div>
            </div>
          </div>
          <a @click="showAllInsuranceTypeList" href="javascript:;" class="toggle-desc toggle-table after-bdr" v-if="prdInfo.insuranceTypeList.length > 3">
            <span>{{showAllInsuranceDesc}}</span>
            <i class="iconfont icon-arrows_down" :class="{'icon-arrows_down': !showAllPolInfo, 'icon-arrows_up': showAllPolInfo}"></i>
          </a>
        </div>
      </div>
      <!--<div class="category-wrap">-->
        <!--<div class="daily-pay">平均每天约{{(prdInfo.premium/365).toFixed(2)}}元，拥有一份安心保障</div>-->
        <!--<ul class="category-list category-flex">-->
          <!--<li class="item">-->
            <!--<div class="icon-wrap after-bdr"><i class="iconfont icon-health"></i></div>-->
            <!--<p>健康保障</p>-->
          <!--</li>-->
          <!--<li class="item">-->
            <!--<div class="icon-wrap after-bdr"><i class="iconfont icon-free"></i></div>-->
            <!--<p>保费豁免</p>-->
          <!--</li>-->
          <!--<li class="item">-->
            <!--<div class="icon-wrap after-bdr"><i class="iconfont icon-approve"></i></div>-->
            <!--<p>身故保障</p>-->
          <!--</li>-->
        <!--</ul>-->
      <!--</div>-->
      <div class="instype-result-wrap" v-show="showBySubPol">
        <div class="genre-box">
          <article class="acc-box"></article>
          <article class="des-box">
            <section class="instype-box ins-desc-show">
              <h3 class="instype-name">健康保障
                <a class="disease-btn after-bdr" @click="showDisease()">病种</a>
              </h3>
              <div class="ins-box" v-if="polData.P0007">
                <h5 class="ins-name">{{polData.P0007.pName}}
                  <a href="javascript:void (0);" class="term-link">条款</a></h5>
                <div class="ins-bd" v-if="mainPolPid === 'P0007' || mainPolPid === 'P0016'">
                  <div class="description1">100种重疾确诊给付<span>{{polData.P0007.premium}}元</span></div>
                  <div class="description1">50种轻疾确诊给付<span>{{`${polData.P0007.premium * 0.2}~${polData.P0007.premium * 0.6}`}}元</span></div>
                  <div class="description2">100种重疾+50种轻症，全面保障，确诊即赔</div>
                  <div class="description1" v-if="polData.P0017">18种特定心脑血管重疾确诊给付<span>{{polData.P0017.premium}}元</span></div>
                  <div class="description1" v-if="polData.P0017">15种特定心脑血管轻疾确诊给付<span>{{polData.P0017.premium}}元</span></div>
                  <!--<div class="description2" v-if="polData.P0017">特定心脑血管疾病(18种重疾+15种轻疾)</div>-->
                  <div class="description1">终身身故保障<span>{{polData.P0007.premium}}元</span></div>
                  <div class="description2">因意外伤害、疾病导致身故，我们按本合同的基本保险金额给付“身故保险金”</div>
                </div>
                <div class="ins-bd" v-if="mainPolPid === 'P0018'">
                  <div class="description1">25种重疾确诊给付<span>{{polData.P0007.premium}}</span>元</div>
                  <!--<div class="description1">50种轻疾确诊给付<span>{{`${polData.P0007.premium * 0.2}~${polData.P0007.premium * 0.6}`}}元</span></div>-->
                  <!--<div class="description2">100种重疾+50种轻症，全面保障，确诊即赔</div>-->
                  <div class="description1" v-if="polData.P0017">18种特定心脑血管重疾确诊给付<span>{{polData.P0017.premium}}元</span></div>
                  <div class="description1" v-if="polData.P0017">15种特定心脑血管轻疾确诊给付<span>{{polData.P0017.premium}}元</span></div>
                  <!--<div class="description2" v-if="polData.P0017">特定心脑血管疾病(18种重疾+15种轻疾)</div>-->
                  <div class="description1">终身身故保障<span>{{polData.P0007.premium}}元</span></div>
                  <div class="description2">因意外伤害、疾病导致身故，我们按本合同的基本保险金额给付“身故保险金”</div>
                </div>
              </div>
            </section>
            <section class="instype-box"  v-if="polData.P0008">
              <h3 class="instype-name">保费豁免</h3>
              <div class="ins-box">
                <h5 class="ins-name">{{polData.P0008.pName}}
                  <a class="term-link">条款</a>
                </h5>
                <div class="ins-bd">
                  <div class="description1">主合同投保人因意外伤害或合同生效90日后因疾病导致身体高度残疾、身故，本公司按合同约定豁免后续应交保费</div>
                  <div class="description2">主合同投保人在合同生效之日起90日之内因疾病导致发生上述责任，公司按合同约定退还本附加合同已交纳的保险费，本附加合同终止。</div>
                </div>
              </div>
            </section>
            <section class="instype-box ins-desc-show"  v-if="polData.P0009 || polData.P0010">
              <h3 class="instype-name">身故保障</h3>
              <div class="ins-box" v-if="polData.P0009">
                <h5 class="ins-name">{{polData.P0009.pName}}
                  <a class="term-link">条款</a>
                </h5>
                <div class="ins-bd">
                  <div class="description1">意外身故保险金<span>{{polData.P0009.premium}}元</span></div>
                  <div class="description2">按附加合同约定的基本保险金额扣除已给付的“意外伤残保险金”后的余额给付“意外身故保险金”</div>
                </div>
              </div>
              <div class="ins-box" v-if="polData.P0010">
                <h5 class="ins-name">{{polData.P0010.pName}}<a>条款</a>
                </h5>
                <div class="ins-bd">
                  <div class="description1">交通意外身故保险金
                    <p v-for="(item2, index2) in polData.P0010.transportListData" :key="index2">
                      {{`${item2.name}: ${item2.premium}元`}}
                    </p>
                    <!--<span>{{polData.P0010.premium}}</span>-->
                    </div>
                  <div class="description2">按附加合同约定的该类交通工具的基本保险金额扣除因被保险人乘坐同类交通工具已给付的“意外伤残保险金”后的余额，给付“意外身故保险金”</div>
                </div>
              </div>
              <div class="ins-box" v-if="polData.P0017">
                <h5 class="ins-name">{{polData.P0017.pName}}<a>条款</a>
                </h5>
                <div class="ins-bd">
                  <div class="description1">身故保险金(心脑血管疾病)
                    <span>{{polData.P0017.premium}}元</span>
                  </div>
                  <div class="description2"></div>
                </div>
              </div>
            </section>
            <section class="instype-box ins-desc-show"  v-if="polData.P0009 || polData.P0010">
              <h3 class="instype-name">伤残保障</h3>
              <div class="ins-box" v-if="polData.P0009">
                <h5 class="ins-name">{{polData.P0009.pName}}
                  <a class="term-link">条款</a>
                </h5>
                <div class="ins-bd">
                  <div class="description1">意外伤残保险金<span>{{polData.P0009.premium}}元</span></div>
                  <div class="description2">达到附加合同约定的基本保险金额时，合同终止</div>
                </div>
              </div>
              <div class="ins-box" v-if="polData.P0010">
                <h5 class="ins-name">{{polData.P0010.pName}}<a>条款</a>
                </h5>
                <div class="ins-bd">
                  <div class="description1">交通意外伤残保险金
                    <p v-for="(item2, index2) in polData.P0010.transportListData" :key="index2">
                      {{`${item2.name}: ${item2.premium}元`}}
                    </p>
                    <!--<span>{{polData.P0010.premium}}元</span>-->
                  </div>
                  <div class="description2">达到附加合同约定的基本保险金额时，合同终止</div>
                </div>
              </div>
            </section>
            <section class="instype-box ins-desc-show"  v-if="polData.P0011 || polData.P0012  || polData.P0013  || polData.P0014  || polData.P0015">
              <h3 class="instype-name">医疗保障</h3>
              <div class="ins-box" v-if="polData.P0011 || polData.P0015">
                <h5 class="ins-name">{{polData.P0011 ? polData.P0011.pName : polData.P0015.pName}}
                  <a class="term-link">条款</a>
                </h5>
                <div class="ins-bd">
                  <div class="description1">意外伤害医疗保险金<span>{{(polData.P0011 ? polData.P0011.premium : polData.P0015.premium)}}元</span></div>
                  <div class="description2">扣除当地社会基本医疗保险、公费医疗保险和其他途径已经补偿或给付部分以及本附加合同约定的免赔额后，对其余额按本附加合同约定给付比例给付医疗保险金</div>
                </div>
              </div>
              <div class="ins-box" v-if="polData.P0012">
                <h5 class="ins-name">{{polData.P0012.pName}}<a>条款</a>
                </h5>
                <div class="ins-bd">
                  <div class="description1">意外伤害住院津贴每日{{polData.P0012.premium * 10}}元</div>
                  <div class="description2">住院津贴每年最多可支付240天</div>
                </div>
              </div>
              <div class="ins-box" v-if="polData.P0013 || polData.P0014">
                <h5 class="ins-name">{{(polData.P0013 ? polData.P0013.pName : polData.P0014.pName)}}<a>条款</a>
                </h5>
                <div class="ins-bd">
                  <!--<div class="description1">住院医疗保险金<span>{{(polData.P0013 ?polData.P0013.premium : polData.P0014.premium)}}元</span></div>-->
                  <div class="description1">住院医疗保险金<span>{{(polData.P0013 ? planObj[polData.P0013.premium] : planObj[polData.P0014.premium])}}</span></div>
                  <div class="description2">扣除当地社会基本医疗保险、公费医疗或其他途径已经补偿或给付部分以及本附加合同约定的免赔额后，对其余额按本附加合同约定的给付比例给付医疗保险金</div>
                </div>
              </div>
            </section>
          </article>
        </div>
      </div>
      <div class="ins-result-wrap" v-show="showByPol">
        <article class="des-box">
          <section class="prod-box">
            <div class="ins-box"  v-for="(item, index) of insuranceTypeList" :key="index">
              <h3 class="ins-name" :class="{'ins-name': !diseaseData[item.pid],'ins-name2': diseaseData[item.pid]}">
                <span>{{item.pName}}</span>
                <a class="dis-link after-bdr" v-if="diseaseData[item.pid]" @click="showDisease(item.pid)">病种</a>
                <a class="term-link after-bdr" @click="gotoShowClause(item.pid, item.pName)">条款</a>
              </h3>
              <div class="ins-bd" v-if="item.pid === 'P0007' && (mainPolPid === 'P0007' || mainPolPid === 'P0016')">
                <div class="description1">100种重疾确诊付<span>{{item.premium}}元</span></div>
                <div class="description1">50种轻疾确诊给付<span>{{`${item.premium * 0.2}~${item.premium * 0.6}`}}元</span></div>
                <div class="description2">轻症疾病保险金按本合同基本保额的20%给付，最高给付三次。每种轻症疾病限给付一次。被保险人在合同生效之日起90日之内因疾病导致发生上述责任，公司退还已交纳保费，本合同终止。</div>
                <div class="description2">被保险人身故，本公司按合同约定给付“身故保险金”。</div>
                <div class="description2">重大疾病保险金与身故保险金仅给付一项，并以一次为限。</div>
              </div>
              <div class="ins-bd" v-if="item.pid === 'P0007' && (mainPolPid === 'P0018')">
                <div class="description1">重大疾病保险金</div>
                <div class="description2">25种重疾确诊给付{{item.premium}}元</div>
                <div class="description1">身故保险金</div>
                <div class="description2">被保险人身故，本公司按合同约定给付“身故保险金”。</div>
                <div class="description2">重大疾病保险金与身故保险金仅给付一项，并以一次为限。</div>
              </div>
              <div class="ins-bd" v-if="item.pid === 'P0008'">
                <!--<div class="description1">被保人身故、高残或100种重疾豁免保费</div>-->
                <div class="description1">主合同投保人因意外伤害或合同生效90日后因疾病导致身体高度残疾、身故，本公司按合同约定豁免后续应交保费</div>
                <!--<div class="description2">被保人出险后，免交后期保险费，保单仍有效，90天内确诊退还附加险保险费，本附加险终止，主险缴费和保障不变</div>-->
                <div class="description2">主合同投保人在合同生效之日起90日之内因疾病导致发生上述责任，公司按合同约定退还本附加合同已交纳的保险费，本附加合同终止。</div>
              </div>
              <div class="ins-bd" v-if="item.pid === 'P0009'">
                <div class="description1">意外身故保险金<span>{{item.premium}}元</span></div>
                <div class="description2">按附加合同约定的基本保险金额扣除已给付的“意外伤残保险金”后的余额给付“意外身故保险金”。</div>
                <div class="description1">意外伤残保险金<span>{{item.premium}}元</span></div>
                <!--<div class="description2">达到附加合同约定的基本保险金额时，合同终止</div>-->
                <div class="description2">按附加合同约定，根据伤残程度按比例给付“意外伤残保险金”。</div>
              </div>
              <div class="ins-bd" v-if="item.pid === 'P0010'">
                <div class="description1">交通意外身故/伤残保险金
                  <p v-for="(item2, index2) in item.transportListData" :key="index2">{{`${item2.name}: ${item2.premium}`}}元</p>
                </div>
                <div class="description2">按附加合同约定的该类交通工具的基本保险金额扣除因被保险人乘坐同类交通工具已给付的“意外伤残保险金”后的余额，给付“意外身故保险金”。</div>
                <!--<div class="description1">交通意外伤残保险金-->
                  <!--<p v-for="(item2, index2) in item.transportListData" :key="index2">{{`${item2.name}: ${item2.premium}`}}元</p>-->
                <!--</div>-->
                <div class="description2">达到附加合同约定的基本保险金额时，合同终止。</div>
              </div>
              <div class="ins-bd" v-if="item.pid === 'P0011' || item.pid === 'P0015'">
                <div class="description1">意外伤害医疗保险金<span>{{item.premium}}元</span></div>
                <!--<div class="description2">扣除当地社会基本医疗保险、公费医疗保险和其他途径已经补偿或给付部分以及本附加合同约定的免赔额后，对其余额按本附加合同约定给付比例给付医疗保险金）</div>-->
                <div class="description2">被保险人在保险期间内遭受意外伤害事故，并自该事故发生之日起180日以内以该事故为直接且单独的原因在医院接受治疗，对于符合合同约定的医疗费用，公司按合同约定给付“意外伤害医疗保险金”。</div>
              </div>
              <div class="ins-bd" v-if="item.pid === 'P0012'">
                <div class="description1">意外伤害住院津贴每日{{item.premium * 10}}元</div>
                <!--<div class="description2">住院津贴每年最可支付240天</div>-->
                <div class="description2">被保险人每次住院的“意外伤害住院津贴保险金”给付日数最多为90日。多次住院累计的给付日数最多为240日。</div>
              </div>
              <div class="ins-bd" v-if="item.pid === 'P0013' || item.pid === 'P0014'">
                <!--<div class="description1">住院医疗保险金<span>{{item.premium}}元</span></div>-->
                <div class="description1">住院医疗保险金<span>{{planObj[item.premium]}}</span></div>
                <!--<div class="description2">扣除当地社会基本医疗保险、公费医疗或其他途径已经补偿或给付部分以及本附加合同约定的免赔额后，对其余额按本附加合同约定的给付比例给付医疗保险金</div>-->
                <div class="description2">被保险人发生意外伤害并因该意外伤害或于本附加合同生效之日起30日后发生疾病并因该疾病，在本公司认可医院住院治疗的，本公司按合同约定给付住院床位费保险金、住院手术费保险金、住院癌症放化疗费用保险金、其他住院费用保险金。</div>
              </div>
              <div class="ins-bd" v-if="item.pid === 'P0017'">
                <!--<div class="description1">住院医疗保险金<span>{{item.premium}}元</span></div>-->
                <div class="description1">特定心脑血管轻症疾病保险金<span>{{item.premium * 0.2}}元</span></div>
                <div class="description2">本公司按基本保险金额的20%给付特定心脑血管轻症疾病保险金，本项保险责任终止，本附加合同继续有效。</div>
                <div class="description1">特定心脑血管重大疾病保险金<span>{{item.premium}}元</span></div>
                <div class="description2">本公司根据合同约定给付特定心脑血管重大疾病保险金，本附加合同终止。</div>
                <div class="description1">特定心脑血管疾病身故保险金<span>{{item.premium}}元</span></div>
                <div class="description2">本公司根据合同约定给付身故保险金，本附加合同终止。</div>
                <!--<div class="description2">因疾病原因由本公司认可的医院的专科医生确诊初次发生本附加合同所指的特定心脑血管重大疾病（无论一种或多种），我们按本附加合同生效之日起已交纳的保险费（不计利息）给付特定心脑血管重大疾病保险金，本附加合同终止。</div>-->
              </div>
            </div>
          </section>
        </article>
      </div>
      <div class="demon-wrap">
        <article class="demonstration-wrap">
          <h3 class="demonstration-title">保单利益</h3>
          <section class="demonstration-container">
            <div class="condition">
              <div class="bonus-wrap">
                <span>保单利益如下：</span>
              </div>
            </div>
            <div class="explicit">
              <div class="explicit-inner after-bdr">
                <div class="explicit-table">
                  <div class="hd">
                    <div class="explicit-cond after-bdr">
                      <div class="explicit-cur">保单年度<span>{{year}}</span>年，被保人<span>{{age}}</span>岁时</div>
                      <i class="iconfont icon-arrow_down"></i>
                      <select name="explicit-years" class="explicit-years" v-model="explicitYears">
                      <option :value=index v-for="(item, index) in interestsAllDetail" :key="index">
                        保单年度{{item.year}}年，被保人{{item.age}}岁时
                      </option>
                    </select>
                    </div>
                  </div>
                  <div class="bd">
                    <dl class="item" v-if="seriousIllness && seriousIllness !== '0'">
                      <dt><i>重疾保险金：</i></dt>
                      <dd><span>{{seriousIllness}}</span><b>元</b></dd>
                    </dl>
                    <dl class="item"  v-if="mildIllness && mildIllness !== '0' && mainPolPid !== 'P0018'">
                      <dt><i>轻症保险金：</i></dt>
                      <dd><span>{{`${mildIllness}~${mildIllness * 3}`}}</span><b>元</b></dd>
                    </dl>
                    <dl class="item"  v-if="death && death !== '0'">
                      <dt><i>身故保险金：</i></dt>
                      <dd><span>{{death}}</span><b>元</b></dd>
                    </dl>
                    <dl class="item"  v-if="accidentMedical && accidentMedical !== '0'">
                      <dt><i>意外伤害医疗保险金：</i></dt>
                      <dd><span>{{accidentMedical}}</span><b>元</b></dd>
                    </dl>
                    <dl class="item"  v-if="accidentDisability && accidentDisability !== '0'">
                      <dt><i>意外伤残/身故保险金：</i></dt>
                      <dd><span>{{commonAccidents}}</span><b>元</b></dd>
                    </dl>
                    <!--<dl class="item"  v-if="accidentDeath && accidentDeath !== '0'">-->
                      <!--<dt><i>意外身故保险金：</i></dt>-->
                      <!--<dd><span>{{commonAccidents}}</span><b>元</b></dd>-->
                    <!--</dl>-->
                    <div  v-if="polData.P0010">
                      <dl class="item" v-for="(item, index) in polData.P0010.transportListData" :key="index">
                        <dt><i>交通意外({{item.name}})保险金：</i></dt>
                        <dd><span>{{item.premium}}</span><b>元</b></dd>
                      </dl>
                    </div>
                    <dl class="item"  v-if="accidentAllowance && accidentAllowance !== '0'">
                      <dt><i>意外住院津贴保险金：</i></dt>
                      <dd><b>每日津贴</b><span>{{accidentAllowance * 10}}</span><b>元</b></dd>
                    </dl>
                    <dl class="item"  v-if="Hospitalization && Hospitalization !== '0'">
                      <dt><i>住院费用保险金：</i></dt>
                      <dd><span>{{planObj[Hospitalization]}}</span></dd>
                    </dl>
                    <dl class="item"  v-if="mildCardioDisease && mildCardioDisease !== '0'">
                      <dt><i>特定心脑血管轻症疾病保险金：</i></dt>
                      <dd><span>{{mildCardioDisease}}</span><b>元</b></dd>
                    </dl>
                    <dl class="item"  v-if="servereCardioDisease && servereCardioDisease !== '0'">
                      <dt><i>特定心脑血管重大疾病保险金：</i></dt>
                      <dd><span>{{servereCardioDisease}}</span><b>元</b></dd>
                    </dl>
                    <dl class="item"  v-if="cardioDeath && cardioDeath !== '0'">
                      <dt><i>身故保险金(心脑血管疾病)：</i></dt>
                      <dd><span>{{cardioDeath}}</span><b>元</b></dd>
                    </dl>
                    <dl class="item"  v-if="cashValue && cashValue !== '0'">
                      <dt><i>现金价值：</i></dt>
                      <dd><span>{{cashValue}}</span><b>元</b></dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="explicit-arrow">
                <div class="arrow" style="transform: translate3d(0px, 0px, 0px);" ref="explicitArrow"></div>
              </div>
            </div>
            <div class="slider">
              <div class="slider-btn minus" @click="minusBar(len)"></div>
              <div class="slider-btn plus" @click="plusBar(len)"></div>
              <div class="runway-wrap">
                <div class="runway-inner" @click="moveBar">
                  <div class="runway">
                    <div class="bar" style="width: 0px;" ref="bar"></div>
                    <div class="button-wrap" style="transform: translate3d(0px, 0px, 0px);" ref="buttonWrap">
                      <div class="tooltip"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="slider-tips">
              <p>拖动按钮查看不同年龄段保单利益</p>
            </div>
            <div class="demon-table-btn">
              <a @click="showInterests()" href="javascript:;" class="btn after-bdr">查看利益演示表</a>
            </div>
            <!--<div class="explicit-summary">-->
              <!--<div class="inner">-->
                <!--<p>重疾保险金：包括重疾（100种），豁免投保人重疾（100种）的最高保障</p>-->
                <!--<p>轻症保险金：包括重疾（50种轻症）</p></div>-->
            <!--</div>-->
          </section>
        </article>
        <sheet v-if="interestsAllDetail['0']" :show="showInterestsTable" v-on:sheetStatus="getSheetStatus" :sheetData="interestsAllDetail" :title="interestsTableTitle" :mainPolPid="mainPolPid">
        </sheet>
      </div>
      <div class="terms-wrap" @click="showClauseList()">
        <a href="javascript:;" class="btn">条款详情</a>
      </div>
      <div class="prompt-wrap">
        <div class="risk-box">
          <dl class="risk">
            <dd class="hd"><i>风险提示</i></dd>
            <dd class="bd"><p>投保人在保单犹豫期后解除合同会遭受一定损失，具体保单利益请以保单合同为准。</p>
              <p>温馨提示：以上演示说明为本平台对上述产品的理解，便于保险从业人员学习、交流，演示数据仅供参考，请以实际为准。</p></dd>
          </dl>
        </div>
        <div class="reminder"></div>
      </div>
    </div>
    <div class="toggle-tab" @click="changeShow">
      <div  class="tab-item">
        <span class="tab-link">{{showDesc}}</span>
      </div>
    </div>
    <!--<footer class="main-footer base-footer">-->
      <!--<div class="item phone line">-->
        <!--<a href="tel:18856910083">-->
          <!--<i class="iconfont icon-phone_line"></i>-->
          <!--<span>姓名:李帅帅</span></a>-->
      <!--</div>-->
      <!--<div class="item see">-->
        <!--<a href="javascript:" @click="getDownPdf('鼎诚人寿重疾险')">-->
          <!--<i class="iconfont icon-documents"></i>-->
          <!--<span>转换为PDF</span>-->
        <!--</a>-->
      <!--</div>-->
    <!--</footer>-->
    <div class="openOther" v-show="downLoadInWX" @click="hideOpenOther"></div>
    <Disease :show="diseaseShow" :diseaseData="diseaseSheetData" v-on:diseaseStatus="getDiseaseStatus"></Disease>
    <ClauseList :data="clauseData" :show="clauseShow" v-on:clauseStatus="getClauseStatus"></ClauseList>
  </div>
</template>

<script>
import axios from 'axios'
import Sheet from '@/components/sheet'
import Disease from '@/components/disease'
import ClauseList from '@/components/clauseList'
import wx from 'weixin-js-sdk'
import sharePic from '../assets/img/logo.png'
export default {
  name: 'showPlan',
  components: {Sheet, Disease, ClauseList},
  data () {
    return {
      hideCover: false,
      coverState: 'block',
      moveNum: 0,
      sexObj: {
        'M': '男',
        'F': '女'
      },
      namedObj: {
        'M': '先生',
        'F': '女士'
      },
      prdInfo: {
        insure: {},
        holder: {},
        premium: 0,
        productId: '',
        insuranceTypeList: []
      },
      insuranceTypeList: [],
      simpleInsuranceTypeList: [],
      showAllPolInfo: false,
      interestsAllDetail: {},
      explicitYears: 0,
      age: '',
      cashValue: '',
      death: '',
      accidentMedical: '',
      mildIllness: '',
      seriousIllness: '',
      year: '',
      accidentDisability: '',
      accidentDeath: '',
      accidentAllowance: '',
      Hospitalization: '',
      commonAccidents: '',
      mildCardioDisease: '',
      servereCardioDisease: '',
      cardioDeath: '',
      len: 0,
      showInterestsTable: false,
      interestsTableTitle: '鼎诚人寿重疾升级版',
      paymentPeriodObj: {
        '5年交': 'pf',
        '10年交': 'pt',
        '15年交': 'pfif',
        '20年交': 'pytw',
        '1年交': 'pOne',
        '趸交': 'pw',
        '4年交': 'pfo',
        '9年交': 'pn',
        '14年交': 'pfot',
        '19年交': 'pnt',
        '29年交': 'ptnt',
        '30年交': 'ptt'
      },
      showByPol: true,
      showBySubPol: false,
      showDesc: '按责任显示',
      showAllInsuranceDesc: '展开明细',
      downLoadInWX: false,
      polData: {
        // P0010: {}
      },
      diseaseShow: false,
      diseaseData: {},
      diseaseSheetData: {},
      clauseShow: false,
      clauseData: [],
      insuranceObj: {
        all: '终身',
        age70: '至70岁',
        age80: '至80岁',
        date20: '20年',
        date30: '30年',
        dateB10: '10年',
        dateB15: '15年',
        dateB20: '20年',
        dateB30: '30年'
      },
      planObj: {
        90400: '计划一',
        177200: '计划二',
        349000: '计划三'
      },
      transportObj: {
        'car': '汽车',
        'train': '列车',
        'airplane': '民航班机',
        'ship': '轮船'
      },
      expirationObj: {
        'all': '鼎诚鼎康保终身重大疾病保险',
        'age70': '鼎诚鼎康保定期重大疾病保险(A款)',
        'age80': '鼎诚鼎康保定期重大疾病保险(A款)',
        'date30': '鼎诚鼎康保定期重大疾病保险(A款)',
        'date20': '鼎诚鼎康保定期重大疾病保险(A款)',
        'dateB10': '鼎诚鼎康保定期重大疾病保险(B款)',
        'dateB15': '鼎诚鼎康保定期重大疾病保险(B款)',
        'dateB20': '鼎诚鼎康保定期重大疾病保险(B款)',
        'dateB30': '鼎诚鼎康保定期重大疾病保险(B款)'
      },
      expirationPidObj: {
        'all': 'P0007',
        'age70': 'P0016',
        'age80': 'P0016',
        'date30': 'P0016',
        'date20': 'P0016',
        'dateB10': 'P0018',
        'dateB15': 'P0018',
        'dateB20': 'P0018',
        'dateB30': 'P0018'
      },
      mainPolPid: ''
    }
  },
  mounted () {
    if (this.$route.query.title) {
      document.title = this.$route.query.title
    } else {
      document.title = '鼎诚人寿'
    }
    if (sessionStorage.getItem('hideCover') === 'true') {
      this.hideCover = true
      this.coverState = 'none'
    } else {
      this.hideCoverFn()
    }
    sessionStorage.setItem('hideCover', 'false')
    document.getElementsByTagName('body')[0].style.padding = '0'
    this.getInfoById()
    this.getWxConfig()
  },
  methods: {
    // 获取微信分享参数
    getWxConfig () {
      axios.get('/controller/weiChat/getConfig', {
        params: {
          url: encodeURIComponent(window.location.href.split('#')[0])
        }
      }).then(data => {
        let resData = data.data
        wx.config({
          debug: false,
          appId: resData.appId,
          timestamp: resData.timestamp,
          nonceStr: resData.noncestr,
          signature: resData.signature,
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
        })
        let shareTitle = this.$route.query.title || '鼎诚人寿计划书'
        let shareLink = window.location.href
        let shareDesc
        if (this.$route.query.name && this.$route.query.sex) {
          shareDesc = `尊敬的${this.$route.query.name + this.namedObj[this.$route.query.sex]}，鼎诚为您量身定制的保险产品，请查收`
        } else {
          shareDesc = '鼎诚为您量身定制的保险产品，请查收'
        }
        let shareImg = window.location.protocol + '//' + window.location.host + sharePic
        wx.ready(function () {
          // 微信好友
          wx.onMenuShareAppMessage({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          // 朋友圈
          wx.onMenuShareTimeline({
            title: shareTitle, // 分享标题
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          // QQ
          wx.onMenuShareQQ({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          // 腾讯微博
          wx.onMenuShareWeibo({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          // QQ空间
          wx.onMenuShareQZone({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareLink, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
        })
      })
    },
    hideCoverFn () {
      setTimeout(() => {
        this.hideCover = true
        setTimeout(() => {
          this.coverState = 'none'
        }, 500)
      }, 4000)
    },
    showPlanContent () {
      this.hideCover = true
      this.coverState = 'none'
    },
    // 拖动事件
    buttonWrap (len) {
      let buttonWrap = this.$refs['buttonWrap']
      let bar = this.$refs['bar']
      let explicitArrow = this.$refs['explicitArrow']
      let beginX = (1 - 0.94667) / 2 * (window.innerWidth) + 65
      let stopX = window.innerWidth * 0.94667 - 65 * 2
      let $this = this
      buttonWrap.addEventListener('touchmove', function (ev) {
        let startx = ev.touches[0].clientX
        let moveX = startx - beginX
        $this.moveNum = Math.round((moveX * len) / stopX)
        if (moveX >= 0 && moveX <= stopX) {
          buttonWrap.style.transform = `translate3d(${moveX}px, 0px, 0px)`
          explicitArrow.style.transform = `translate3d(${moveX}px, 0px, 0px)`
          bar.style.width = `${moveX}px`
        } else if (moveX < 0) {
          $this.moveNum = 0
        } else if (moveX > stopX) {
          $this.moveNum = len
        }
      })
    },
    // 点击事件
    moveBar (tag) {
      let moveX = tag.x
      let len = this.len
      let beginX = (1 - 0.94667) / 2 * (window.innerWidth) + 65
      let stopX = window.innerWidth - beginX
      let buttonWrap = this.$refs['buttonWrap']
      let bar = this.$refs['bar']
      let explicitArrow = this.$refs['explicitArrow']
      let runWayInnerWidth = window.innerWidth * 0.94667 - 65 * 2
      if (moveX >= beginX && moveX <= stopX) {
        let barX = moveX - beginX
        buttonWrap.style.transform = `translate3d(${barX}px, 0px, 0px)`
        explicitArrow.style.transform = `translate3d(${barX}px, 0px, 0px)`
        bar.style.width = `${barX}px`
        this.moveNum = Math.round((barX * len) / runWayInnerWidth)
      }
    },
    // 增加事件
    plusBar (len) {
      let buttonWrap = this.$refs['buttonWrap']
      let bar = this.$refs['bar']
      let explicitArrow = this.$refs['explicitArrow']
      let runWayInnerWidth = window.innerWidth * 0.94667 - 65 * 2
      if (this.moveNum < len) {
        this.moveNum++
        let barX = this.moveNum * (runWayInnerWidth / len)
        buttonWrap.style.transform = `translate3d(${barX}px, 0px, 0px)`
        explicitArrow.style.transform = `translate3d(${barX}px, 0px, 0px)`
        bar.style.width = `${barX}px`
      }
    },
    // 减少事件
    minusBar (len) {
      let buttonWrap = this.$refs['buttonWrap']
      let bar = this.$refs['bar']
      let explicitArrow = this.$refs['explicitArrow']
      let runWayInnerWidth = window.innerWidth * 0.94667 - 65 * 2
      if (this.moveNum > 0) {
        this.moveNum--
        let barX = this.moveNum * (runWayInnerWidth / len)
        buttonWrap.style.transform = `translate3d(${barX}px, 0px, 0px)`
        explicitArrow.style.transform = `translate3d(${barX}px, 0px, 0px)`
        bar.style.width = `${barX}px`
      }
    },
    // 根据id查询出产品信息
    getInfoById () {
      let id = this.$route.query.prospectusId
      axios.get('/controller/prospectus/getPropectusById', {
        params: {
          prospectusId: id
        }
      }).then(data => {
        this.prdInfo = data.data
        this.prdInfo.insuranceTypeList[0].pName = this.expirationObj[this.prdInfo.insuranceTypeList[0].insurancePeriod]
        this.mainPolPid = this.expirationPidObj[this.prdInfo.insuranceTypeList[0].insurancePeriod]
        for (let item of this.prdInfo.insuranceTypeList) {
          if (item.pid !== 'P0010') {
            this.insuranceTypeList.push(item)
          } else {
            let hasP10 = false
            for (let item2 of this.insuranceTypeList) {
              if (item2.pid === 'P0010') {
                hasP10 = true
                item2.insuredAmount += item.insuredAmount
                item2.transportListData.push({
                  name: this.transportObj[item.transport],
                  transport: item.transport,
                  premium: item.premium
                })
              }
            }
            if (!hasP10) {
              item.transportListData = [{
                name: this.transportObj[item.transport],
                transport: item.transport,
                premium: item.premium
              }]
              this.insuranceTypeList.push(item)
            }
          }
        }
        // this.insuranceTypeList = this.prdInfo.insuranceTypeList
        if (this.insuranceTypeList.length > 3) {
          this.simpleInsuranceTypeList.push(this.insuranceTypeList[0], this.insuranceTypeList[1], this.insuranceTypeList[2])
        } else {
          this.simpleInsuranceTypeList = this.insuranceTypeList
        }
        let pids = []
        let pidsDisease = []
        let premium = this.insuranceTypeList[0].premium
        let paymentPeriod = this.insuranceTypeList[0].paymentPeriod
        let diffFlag = true
        let queryDiffData = {
          interests: [],
          expiration: this.insuranceTypeList[0].insurancePeriod
        }
        for (let item of this.insuranceTypeList) {
          if (item.pid) {
            pids.push(item.pid)
            pidsDisease.push([item.pid, item.pName])
            this.$set(this.clauseData, this.clauseData.length, {
              pid: item.pid,
              pName: item.pName
            })
            // this.clauseData.push({
            //   pid: item.pid,
            //   pName: item.pName
            // })
          }
          if ((item.premium !== premium || item.paymentPeriod !== paymentPeriod) && item.calculateType !== 'shortTerm') {
            diffFlag = false
          }
          this.polData[item.pid] = item
          if (item.pid === 'P0010') {
            for (let item2 of item.transportListData) {
              queryDiffData.interests.push(
                {
                  cAge: this.prdInfo.insure.age,
                  cSex: this.prdInfo.insure.sex,
                  paymentPeriod: this.paymentPeriodObj[item.paymentPeriod],
                  pid: item.pid,
                  premium: item2.premium
                }
              )
            }
          } else {
            queryDiffData.interests.push(
              {
                cAge: this.prdInfo.insure.age,
                cSex: this.prdInfo.insure.sex,
                paymentPeriod: this.paymentPeriodObj[item.paymentPeriod],
                pid: item.pid,
                premium: item.premium
              }
            )
          }
        }
        this.getAllDisease(pidsDisease)
        pids = pids.join(',')
        let queryData = {
          cAge: this.prdInfo.insure.age,
          cSex: this.prdInfo.insure.sex,
          paymentPeriod: 'pf',
          premium: this.prdInfo.premium,
          productId: 'PID0002',
          pids: pids
        }
        this.getInterestsAllDetail(queryData, queryDiffData, diffFlag, pids)
      })
    },
    showAllInsuranceTypeList () {
      this.showAllPolInfo = !this.showAllPolInfo
      if (this.showAllPolInfo) {
        this.simpleInsuranceTypeList = this.insuranceTypeList
        this.showAllInsuranceDesc = '关闭明细'
      } else {
        this.simpleInsuranceTypeList = []
        this.simpleInsuranceTypeList.push(this.insuranceTypeList[0], this.insuranceTypeList[1], this.insuranceTypeList[2])
        this.showAllInsuranceDesc = '展开明细'
      }
    },
    // 获取利益表
    getInterestsAllDetail (queryData, queryDiffData, diffFlag, pids) {
      axios.get('/controller/interestsController/getProductInterests?pids=' + pids).then(data => {
        // if (!diffFlag) {
        //   console.log(JSON.stringify(queryDiffData))
        axios({
          method: 'post',
          url: '/controller/interestsController/getInterestsAllDetailNew',
          data: queryDiffData
        }).then(data => {
          this.getInterestsAllDetailData(data)
        })
        // } else {
        //   axios.get('/controller/interestsController/getInterestsAllDetail', {
        //     params: queryData
        //   }).then(data => {
        //     this.getInterestsAllDetailData(data)
        //   })
        // }
      })
    },
    // 处理获取的利息表
    getInterestsAllDetailData (data) {
      let resData = data.data
      this.age = resData.age ? resData.age[0] : ''
      this.cashValue = resData.cashValue ? resData.cashValue[0].toFixed(2) : ''
      this.death = resData.death ? resData.death[0] : ''
      this.accidentDisability = resData.accidentDisability ? resData.accidentDisability[0] : ''
      this.mildIllness = resData.mildIllness ? resData.mildIllness[0] : ''
      this.seriousIllness = resData.seriousIllness ? resData.seriousIllness[0] : ''
      this.accidentDeath = resData.accidentDeath ? resData.accidentDeath[0] : ''
      this.accidentAllowance = resData.accidentAllowance ? resData.accidentAllowance[0] : ''
      this.accidentMedical = resData.accidentMedical ? resData.accidentMedical[0] : ''
      this.Hospitalization = resData.Hospitalization ? resData.Hospitalization[0] : ''
      this.commonAccidents = resData.commonAccidents ? resData.commonAccidents[0] : ''
      this.mildCardioDisease = resData.mildCardioDisease ? resData.mildCardioDisease[0] : ''
      this.servereCardioDisease = resData.servereCardioDisease ? resData.servereCardioDisease[0] : ''
      this.cardioDeath = resData.cardioDeath ? resData.cardioDeath[0] : ''
      this.year = resData.year ? resData.year[0] : ''
      this.len = resData.age.length - 1
      this.buttonWrap(this.len)
      for (let i = 0; i < resData.age.length; i++) {
        this.interestsAllDetail[i] = {
          age: resData.age ? resData.age[i] : '',
          cashValue: resData.cashValue ? resData.cashValue[i].toFixed(2) : '',
          death: resData.death ? resData.death[i] : '',
          accidentDisability: resData.accidentDisability ? resData.accidentDisability[i] : '',
          mildIllness: resData.mildIllness ? resData.mildIllness[i] : '',
          seriousIllness: resData.seriousIllness ? resData.seriousIllness[i] : '',
          accidentDeath: resData.accidentDeath ? resData.accidentDeath[i] : '',
          accidentAllowance: resData.accidentAllowance ? resData.accidentAllowance[i] : '',
          accidentMedical: resData.accidentMedical ? resData.accidentMedical[i] : '',
          Hospitalization: resData.Hospitalization ? resData.Hospitalization[i] : '',
          commonAccidents: resData.commonAccidents ? resData.commonAccidents[i] : '',
          mildCardioDisease: resData.mildCardioDisease ? resData.mildCardioDisease[i] : '',
          servereCardioDisease: resData.servereCardioDisease ? resData.servereCardioDisease[i] : '',
          cardioDeath: resData.cardioDeath ? resData.cardioDeath[i] : '',
          year: resData.year ? resData.year[i] : ''
        }
        if (this.polData.P0010) {
          for (let item of this.polData.P0010.transportListData) {
            this.interestsAllDetail[i][item.transport] = item.premium
          }
        }
      }
    },
    // 查看利益演示表
    showInterests () {
      this.showInterestsTable = true
    },
    getSheetStatus (data) {
      this.showInterestsTable = data
    },
    // 改变按险种显示还是按责任显示
    changeShow () {
      this.showByPol = !this.showByPol
      this.showBySubPol = !this.showBySubPol
      if (this.showByPol) {
        this.showDesc = '按责任显示'
      }
      if (this.showBySubPol) {
        this.showDesc = '按险种显示'
      }
    },
    // 下载pdf
    getDownPdf (title) {
      let ua = window.navigator.userAgent.toLowerCase()
      if (ua.indexOf('micromessenger') >= 0) {
        this.downLoadInWX = true
      } else {
        window.scrollTo(0, document.body.scrollHeight)
        this.getPdf(title)
      }
    },
    // 关闭微信内提示
    hideOpenOther () {
      this.downLoadInWX = false
    },
    gotoShowClause (pid, pName) {
      this.$router.push({
        name: 'showClause',
        query: {
          pid: pid,
          pName: pName
        }
      })
    },
    getDiseaseData (pid) {
      return new Promise((resolve, reject) => {
        axios.get('/controller/insuranceTypeChoose/diseaseSpecies', {
          params: {
            pid: this.mainPolPid === 'P0018' && pid[0] === 'P0007' ? 'P0018' : pid[0]
          }
        }).then(data => {
          if (data.data.length) {
            let obj = {
              servere: [],
              mild: [],
              pName: pid[1],
              pid: pid[0]
            }
            for (let item of data.data) {
              if (item.diseaseType === 'servere') {
                obj.servere.push(item)
              } else if (item.diseaseType === 'mild') {
                obj.mild.push(item)
              }
            }
            this.$set(this.diseaseData, pid[0], obj)
          }
          resolve()
        })
      })
    },
    async getAllDisease (pidArray) {
      let array = []
      for (let i = 0; i < pidArray.length; i++) {
        array.push(this.getDiseaseData(pidArray[i]))
      }
      await Promise.all(array)
    },
    // 查看病种
    showDisease (pid) {
      if (pid) {
        this.diseaseSheetData = {}
        this.diseaseSheetData[pid] = this.diseaseData[pid]
      } else {
        this.diseaseSheetData = this.diseaseData
      }
      this.diseaseShow = true
    },
    getDiseaseStatus (data) {
      this.diseaseShow = data
    },
    showClauseList () {
      this.clauseShow = true
    },
    getClauseStatus (data) {
      this.clauseShow = data
    }
  },
  watch: {
    explicitYears (val) {
      let buttonWrap = this.$refs['buttonWrap']
      let bar = this.$refs['bar']
      let explicitArrow = this.$refs['explicitArrow']
      let runWayInnerWidth = window.innerWidth * 0.94667 - 65 * 2
      this.moveNum = val
      let barX = this.moveNum * (runWayInnerWidth / this.len)
      buttonWrap.style.transform = `translate3d(${barX}px, 0px, 0px)`
      explicitArrow.style.transform = `translate3d(${barX}px, 0px, 0px)`
      bar.style.width = `${barX}px`
    },
    moveNum (val) {
      this.age = this.interestsAllDetail[val].age
      this.cashValue = this.interestsAllDetail[val].cashValue
      this.death = this.interestsAllDetail[val].death || this.interestsAllDetail['0'].death
      this.accidentDisability = this.interestsAllDetail[val].accidentDisability || this.interestsAllDetail['0'].accidentDisability
      this.mildIllness = this.interestsAllDetail[val].mildIllness || this.interestsAllDetail['0'].mildIllness
      this.seriousIllness = this.interestsAllDetail[val].seriousIllness || this.interestsAllDetail['0'].seriousIllness
      this.year = this.interestsAllDetail[val].year
      this.accidentDeath = this.interestsAllDetail[val].accidentDeath || this.interestsAllDetail['0'].accidentDeath
      this.accidentAllowance = this.interestsAllDetail[val].accidentAllowance || this.interestsAllDetail['0'].accidentAllowance
      this.accidentMedical = this.interestsAllDetail[val].accidentMedical || this.interestsAllDetail['0'].accidentMedical
      this.Hospitalization = this.interestsAllDetail[val].Hospitalization || this.interestsAllDetail['0'].Hospitalization
      this.commonAccidents = this.interestsAllDetail[val].commonAccidents || this.interestsAllDetail['0'].commonAccidents
    }
  }
}
</script>

<style scoped>
  .cover {
    background-color: #15c2ff;
    opacity: 1;
    z-index: 2000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity .5s linear;
  }
  .cover.hide {
    opacity: 0;
  }
  @keyframes showCoverInner {
    from {
      top: 70%;
      opacity: 0;
    }
    to {
      top: 50%;
      opacity: 1;
    }
  }
  .coverInner {
    position: absolute;
    top: 50%;
    opacity: 1;
    left: 50%;
    width: 80%;
    margin: auto;
    border-radius: 10px;
    transform: translate(-50%,-50%);
    animation: showCoverInner 1s 0.5s both;
  }
  .coverInnerImg {
    width: 100%;
    height: auto;
  }
  @keyframes showCoverBd {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .coverBd {
    min-height: 150px;
    opacity: 1;
    animation: showCoverBd 1s 1.5s both;
  }
  .coverWrap {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .coverWrapBtn {
    background-color: #44afd0;
    color: #fff;
    display: inline-block;
    width: 72px;
    height: 72px;
    margin-bottom: 15px;
    border-radius: 50%;
    line-height: 72px;
    font-style: inherit;
    font-size: 18px;
  }
  .coverWrap p {
    color: #ffffff;
    font-size: 16px;
  }
  .planContent {
    width: 100%;
    overflow: hidden;
    background-color: #4093db;
    /*border-bottom: 60px solid #4093db;*/
  }
  .header {
    width: 100%;
    height: 180px;
    overflow: hidden;
    margin-bottom: -20px;
  }
  .headerImg {
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/header.jpg");
    background-size: cover;
    background-position: center;
  }
  /*.header img {*/
    /*width: 100%;*/
  /*}*/
  .person {
    position: relative;
    border-radius: 4px;
    background-color: #fff;
    width: 94.667%;
    margin: 0 auto;
    margin-bottom: 10px;
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
  }
  .person .insured-total {
    display: flex;
    padding: 30px 15px 5px;
    text-align: center;
  }
  .person .insured-total .item {
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }
  .person .insured-total .cell-hd {
    color: #999;
    font-size: 14px;
    line-height: 22px;
  }
  .cell-box .cell-bd, .cell-box .cell-hd {
    flex: 1;
  }
  .person .insured-total .item .cell-bd, .person .insured-total .item span, .toggle-desc>span {
    color: #5081dc;
  }
  .person .insured-total.insured-peoples .cell-bd {
    font-size: 15px;
  }
  .person .insured-total .cell-bd {
    font-size: 18px;
    line-height: 21px;
    font-weight: 500;
  }
  .person .fd {
    padding-bottom: 30px;
  }
  .instable {
    margin: 10px 15px 0;
    font-size: 13px;
    text-align: center;
    position: relative;
  }
  .instable .row {
    display: flex;
  }
  .after-bd-b, .after-bd-r {
    position: relative;
  }
  .instable .row:first-child .cell {
    padding: 10px 0;
    text-align: center;
    background: #f8f8f8;
  }
  .instable .row .cell:first-child {
    width: 32.16%;
  }
  .instable .row .cell:nth-child(odd) {
    width: 28.14%;
  }
  .instable .row .cell {
    float: left;
    padding: 10px 8px;
    font-size: 12px;
    text-align: left;
    word-break: break-all;
    flex: 1;
    width: 25%;
    color: #384a6f;
    -webkit-box-flex: 1;
  }
  .instable .row .cell p {
    padding-bottom: 5px;
  }
  .after-bd-b:after {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(.5);
  }
  .after-bd-r:after {
    right: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    transform: scaleX(.5);
  }
  .after-bd-b:after, .after-bd-r:after {
    position: absolute;
    background: #e5e5e5;
    content: "";
    pointer-events: none;
    transform-origin: 0 0;
  }
  .instable:after, .instable:before {
    z-index: 1;
    content: "";
    position: absolute;
    pointer-events: none;
    background-color: #e5e5e5;
    left: 0;
    top: 0;
  }
  .instable:before {
    height: 100%;
    width: 1px;
    transform: scaleX(.5);
    transform-origin: 0 0;
  }
  .instable:after {
    width: 100%;
    height: 1px;
    transform: scaleY(.5);
    transform-origin: 0 0;
  }
  .person .toggle-table {
    padding: 5px 0;
    margin: -1px 15px 0;
    box-sizing: content-box;
    outline: 0;
    color: #333;
  }
  .toggle-desc {
    position: relative;
    display: block;
    height: 22px;
    padding-top: 10px;
    text-align: center;
    outline: none;
  }
  :link, :visited {
    text-decoration: none;
  }
  .icon-arrows_up {
    color: #5081dc;
    font-weight: 700;
  }
  .category-wrap {
    position: relative;
    width: 94.667%;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 15px 0px;
    background-color: #fff;
    border-radius: 4px;
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
  }
  .adv-wrap .multiple .title, .adv-wrap .single .title, .category-list .item i, .daily-pay, .other-share .iconfont {
    color: #5081dc;
  }
  .daily-pay {
    margin-bottom: 15px;
    text-align: center;
    font-size: 15px;
  }
  .category-list.category-flex {
    display: flex;
  }
  .category-list {
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }
  ol, ul {
    list-style: none;
  }
  .category-list.category-flex .item {
    display: block;
    flex: 1;
  }
  .category-list .item {
    display: inline-block;
    padding: 0 7px;
    text-align: center;
  }
  .category-list .item .icon-wrap {
    position: relative;
    width: 40px;
    max-width: 100%;
    height: 40px;
    margin: 0 auto 5px;
    text-align: center;
  }
  .after-bdr {
    position: relative;
    border: none;
  }
  .after-bdr:after {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    border: 1px solid #5081dc;
    content: "";
    pointer-events: none;
    transform: scale(.5);
    transform-origin: left top;
  }
  .category-list .item .icon-wrap:after {
    border-radius: 100%;
  }
  .category-list .item p {
    font-size: 12px;
    color: #333;
  }
  .category-list .item i {
    font-size: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .ins-result-wrap, .instype-result-wrap {
    width: 94.667%;
    margin: 0 auto;
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
  }
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
  }
  .des-box {
    z-index: 1;
    position: relative;
  }
  .instype-result-wrap .instype-box {
    padding: 15px 0;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #fff;
  }
  .ins-result-wrap .ins-box, .ins-result-wrap .instype-box, .instype-result-wrap .ins-box, .instype-result-wrap .instype-box {
    color: #333;
  }
  .instype-result-wrap .instype-box .instype-name {
    position: relative;
    margin-bottom: 12px;
    padding-bottom: 15px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
  }
  .ins-result-wrap .prod-box .ins-name, .instype-result-wrap .instype-name {
    color: #333;
  }
  .instype-result-wrap .instype-box .instype-name .disease-btn {
    z-index: 1;
    position: absolute;
    right: 20px;
    top: 2px;
    padding: 5px 10px 3px;
    line-height: 1;
    font-size: 12px;
    font-weight: 400;
  }
  .disease-btn {
    color: #5081dc;
    background-color: #eef6ff;
  }
  .instype-result-wrap .instype-box .instype-name:after {
    z-index: 1;
    content: "";
    position: absolute;
    height: 1px;
    transform: scaleY(.5);
    transform-origin: 0 0;
    pointer-events: none;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #e5e5e5;
  }
  .instype-result-wrap .instype-box .instype-name .disease-btn:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
  .instype-result-wrap .instype-box .instype-name .disease-btn:after {
    border-radius: 100px;
  }
  .healthy .disease-btn:after {
    border-color: #5081dc;
  }
  .instype-result-wrap .instype-box .ins-box:first-of-type {
    padding-top: 0;
  }
  .instype-result-wrap .instype-box .ins-box .ins-name {
    height: 18px;
    margin-bottom: 5px;
    padding: 0 15px;
    line-height: 19px;
    font-size: 13px;
    color: #999;
  }
  .comment, .instype-box .ins-name {
    display: none;
    text-align: justify;
  }
   .des-box .dis-link, .des-box .term-link {
    color: #5081dc;
    background-color: #fff9ee;
  }
  .des-box .dis-link, .des-box .term-link {
    z-index: 1;
    float: right;
    padding: 5px 10px 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #999;
  }
  /*.des-box .term-link {*/
    /*margin-left: 15px;*/
  /*}*/
  .instype-result-wrap .instype-box .ins-box .ins-bd {
    padding: 0 20px 0 30px;
  }
  .description1 {
    position: relative;
    margin-bottom: 5px;
    margin-top: 4px;
    line-height: 21px;
    font-size: 15px;
    text-align: justify;
  }
  .description1:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px;
    border: 3px solid #5081dc;
    border-radius: 50%;
    vertical-align: middle;
  }
  .description1 span,.description1 p, .dialog .tabs-hd-nav .current {
    color: #5081dc;
  }
  .description1 span {
    position: relative;
    top: 1px;
    font-size: 18px;
    font-weight: 500;
    margin: 0 3px;
    line-height: 1;
  }
  .description1 p {
    position: relative;
    top: 1px;
    font-size: 18px;
    font-weight: 500;
    margin: 0 3px;
  }
  .description2, .extraDesc {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 20px;
    color: #999;
  }
  .ins-result-wrap .ins-box .toggle-desc, .ins-result-wrap .instype-box .toggle-desc, .instype-result-wrap .ins-box .toggle-desc, .instype-result-wrap .instype-box .toggle-desc {
    height: 27px;
    margin-bottom: -12px;
    padding-top: 5px;
  }
  .ins-result-wrap .prod-box {
    padding: 0 20px;
    margin: 0 auto 10px;
    border-radius: 4px;
    background-color: #fff;
  }
  .ins-result-wrap .prod-box .ins-box {
    padding: 15px 0 15px 10px;
    position: relative;
  }
  .ins-result-wrap .prod-box .ins-name {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    padding-right: 44px;
  }
  .ins-result-wrap .prod-box .ins-name2 {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    padding-right: 104px;
  }
  .ins-result-wrap .prod-box .ins-name>span {
    /*width: 70%;*/
    /*display: inline-block;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
  }
  .des-box .dis-link, .des-box .term-link {
    z-index: 1;
    float: right;
    padding: 5px 10px 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #5081dc;
    background-color: #eef6ff;
    position: absolute;
    right: 50px;
    top: 2px;
    /*margin-left: 15px;*/
  }
  .des-box .term-link {
    position: absolute;
    float: none;
    right: 0;
    top: 2px;
  }
  .des-box .dis-link:before, .des-box .term-link:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
  .healthy .des-box .dis-link:after, .healthy .des-box .term-link:after {
    border-color: #5081dc;
  }
  .des-box .dis-link:after, .des-box .term-link:after {
    border-radius: 100px;
    border-color: #5081dc;
  }
  .ins-result-wrap .ins-box .toggle-desc, .ins-result-wrap .instype-box .toggle-desc, .instype-result-wrap .ins-box .toggle-desc, .instype-result-wrap .instype-box .toggle-desc {
    height: 27px;
    margin-bottom: -12px;
    padding-top: 5px;
  }
  .toggle-desc .icon-arrows_down, .toggle-desc .icon-arrows_up {
    font-weight: 700;
  }
  .icon-arrows_down, .icon-arrows_up {
    color: #5081dc;
    font-weight: 700;
  }
  .demonstration-wrap {
    width: 94.667%;
    margin: 0 auto 10px;
    border-radius: 4px;
    background-color: #fff;
  }
  .demonstration-wrap .demonstration-title {
    padding: 15px 15px 5px;
    font-size: 17px;
    font-weight: 700;
    color: #333;
    text-align: center;
  }
  .demonstration-container {
    user-select: none;
  }
  .demonstration-wrap .condition, .demonstration-wrap .explicit {
    background-color: #fff;
  }
  .demonstration-container .bonus-wrap {
    font-size: 15px;
    padding: 20px 14px;
  }
  .demonstration-container .explicit {
    margin: 0 auto;
    padding: 0 14px;
  }
  .demonstration-container .explicit-inner {
    padding: 7.6%;
    border-radius: 8px;
    border: 1px solid #5081dc;
  }
  .demonstration-container .explicit-inner .explicit-table {
    position: relative;
  }
  .demonstration-container .explicit-inner .explicit-table .bd{
    position: relative;
    right: -7.6%;
  }
  .demonstration-container .explicit-inner:after {
    /*border-radius: 8px;*/
  }
  .demonstration-container .explicit-table .explicit-cond:after {
    border-radius: 4px;
  }
  .demonstration-container .explicit-table .hd {
    margin-bottom: 15px;
    text-align: center;
  }
  .demonstration-container .explicit-table .explicit-cond {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 5px 15px 5px 20px;
    color: #333;
    font-size: 15px;
    text-align: center;
    border: 1px solid #5081dc;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .demonstration-container .explicit-table .explicit-cur {
    margin-right: 20px;
    line-height: 17px;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .demonstration-container .explicit-inner:after, .demonstration-container .explicit-table .explicit-cond:after {
    /*border-color: #5081dc;*/
  }
  .demonstration-container .explicit-table .icon-arrow_down {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    margin-top: -1px;
  }
  .demonstration-container .explicit-table .explicit-years {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    border: 0;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
  }
  .demonstration-container .explicit-table .item {
    display: flex;
    height: 24px;
    line-height: 24px;
    margin-bottom: 10px;
  }
  .demonstration-container .explicit-table .item dt {
    position: relative;
    text-align: right;
    line-height: 26px;
  }
  .demonstration-container .explicit-table .item i {
    z-index: 10;
    position: absolute;
    right: 0;
    top: 50%;
    line-height: 1;
    transform: translateY(-50%);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  .demonstration-container .explicit-table .item dd {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 22px;
  }
  .demonstration-container .explicit-table .item dt {
    flex: 1;
    font-size: 14px;
    height: 24px;
    /*width: 155px;*/
  }
  .demonstration-container .explicit-table .item dd {
    flex: 1;
    font-size: 14px;
    height: 24px;
    /*float: left;*/
  }
  .demonstration-container .explicit-table .explicit-cur span, .demonstration-container .explicit-table .icon-arrow_down, .demonstration-container .explicit-table .item span, .demonstration-container .slider .slider-btn {
    color: #5081dc;
  }
  .demonstration-container .explicit-table .item span {
    font-size: 18px;
    vertical-align: middle;
  }
  .demonstration-container .explicit-table .item b {
    vertical-align: middle;
    font-size: 12px;
  }
  .demonstration-container .explicit-arrow {
    position: relative;
  }
  .demonstration-container .explicit-arrow .arrow {
    z-index: 2;
    position: absolute;
    left: 38px;
    top: 0;
  }
  .demonstration-container .explicit-arrow .arrow:after, .demonstration-container .explicit-arrow .arrow:before {
    content: "";
    display: block;
    border-width: 12px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    border-style: solid dashed dashed;
    font-size: 0;
    line-height: 0;
  }
  .demonstration-container .explicit-arrow .arrow:before {
    border-color: #5081dc transparent transparent;
  }
  .demonstration-container .explicit-arrow .arrow:after {
    top: -1px;
    border-color: #fff transparent transparent;
  }
  .demonstration-container .slider {
    position: relative;
    width: 100%;
    padding: 10px 0;
  }
  .demonstration-container .slider .minus {
    left: 5px;
  }
  .demonstration-container .slider .slider-btn {
    z-index: 20;
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    font-size: 32px;
    line-height: 40px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-tap-highlight-color: transparent;
  }
  .demonstration-container .slider .slider-btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    height: 2px;
    width: 18px;
  }
  .demonstration-container .slider .plus {
    right: 5px;
  }

  .demonstration-container .slider .plus:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 2px;
    height: 18px;
  }
  .demonstration-container .slider .runway-wrap {
    padding: 15px 65px;
  }
  .demonstration-container .slider .runway-inner {
    padding: 5px 0;
  }
  .demonstration-container .slider .runway {
    background-color: #e0e0e0;
  }
  .demonstration-container .slider .runway {
    width: 100%;
    height: 8px;
    margin: 0 auto;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
  }
  .demonstration-container .slider .bar {
    background-color: #5081dc;
  }
  .demonstration-container .slider .bar {
    position: absolute;
    height: 8px;
    width: 0;
    max-width: 100%;
    border-radius: 100px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
  }
  .demonstration-container .slider .button-wrap {
    border-color: rgba(38, 40, 95, 0.2);
  }
  .demonstration-container .slider .button-wrap {
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 21;
    top: 50%;
    border-width: 4px;
    border-style: solid;
    border-radius: 100px;
    margin-left: -15px;
    margin-top: -15px;
    background-color: transparent;
    text-align: center;
    user-select: none;
  }
  .demonstration-container .slider .button-wrap:before {
    z-index: 21;
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
  .demonstration-container .slider .minus:after, .demonstration-container .slider .plus:after, .demonstration-container .slider .plus:before, .demonstration-container .slider .tooltip {
    background-color: #5081dc;
  }
  .demonstration-container .slider .tooltip {
    width: 100%;
    height: 100%;
    border-radius: 100px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  *, :after, :before {
    box-sizing: border-box;
  }
  .demon-wrap {
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
  }
  .demonstration-container .slider-tips {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding-bottom: 20px;
  }
  .demon-table-btn {
    padding-bottom: 20px;
    font-size: 15px;
    text-align: center;
  }
  .demon-table-btn .btn {
    color: #5081dc;
    background-color: #eef6ff;
  }
  .demon-table-btn .btn {
    display: inline-block;
    padding: 7px 21px;
    border: 1px solid #5081dc;
    border-radius: 8px;
  }
  .demon-table-btn .btn:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
  /*.demon-table-btn .btn:after {*/
    /*border-color: #5081dc;*/
  /*}*/
  /*.demon-table-btn .btn:after {*/
    /*border-radius: 8px;*/
  /*}*/
  .explicit-summary {
    overflow: hidden;
  }
  .explicit-summary .inner {
    margin-bottom: 15px;
    padding: 9px 14px;
    font-size: 13px;
    line-height: 1.46;
    color: #333;
    background-color: #f8f8f8;
  }
  .explicit-summary p {
    margin-bottom: 9px;
  }
  .terms-wrap {
    width: 94.667%;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #fff;
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
  }
  .terms-wrap .btn {
    display: block;
    padding: 12px 0;
    text-align: center;
    color: #333;
    font-weight: 700;
    font-size: 17px;
  }
  .prompt-wrap {
    text-align: justify;
  }
  .prompt-wrap {
    position: relative;
    width: 94.667%;
    margin: 0 auto;
    color: #999;
    font-size: 13px;
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
    margin-bottom: 10px;
  }
  .risk-box {
    border-radius: 4px;
    background-color: #fff;
    padding: 15px;
    color: #333;
  }
  .risk-box .hd {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: center;
  }
  .risk-box .bd {
    font-size: 16px;
    padding-left: 15px;
  }
  .risk-box p {
    position: relative;
    line-height: 1.5;
    margin-bottom: 9px;
  }
  .main-footer {
    z-index: 100;
    position: fixed;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    background-color: #f8f8f8;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,0,0,.1);
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
  }
  .main-footer .user {
    width: 38%;
  }
  .main-footer .item {
    float: left;
    position: relative;
    background-color: #f8f8f8;
  }
  .main-footer .item a {
    display: block;
    height: 100%;
    line-height: 60px;
    color: #333;
  }
  .main-footer .name-card .head {
    position: absolute;
    left: 10%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 40px;
  }
  .main-footer .name-card .head>img {
    width: 100%;
    vertical-align: middle;
    border-radius: 100%;
  }
  .main-footer .name-card .info {
    padding-left: 50%;
    font-size: 15px;
    text-align: left;
  }
  .main-footer .name-card .info p {
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .main-footer .minipg, .main-footer .phone {
    width: 71%;
  }
  .main-footer .line:before {
    left: 6%;
  }
  .main-footer .line:after, .main-footer .line:before {
    z-index: 1;
    content: "";
    position: absolute;
    width: 1px;
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    background-color: #e5e5e5;
    height: 58%;
    top: 21%;
  }
  .main-footer .line:after {
    right: 6%;
  }
  .main-footer .phone .iconfont, .main-footer .see .iconfont {
    margin-right: 6px;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
  }
  .main-footer .phone span, .main-footer .see span {
    font-size: 14px;
    vertical-align: middle;
    line-height: 1;
  }
  .main-footer .edit, .main-footer .see {
    /*width: 29%;*/
    flex: 1;
  }
  .main-footer .item {
    float: left;
    position: relative;
    background-color: #f8f8f8;
  }
  .toggle-tab {
    background-image: url(../assets/img/btn-tmp.png);
  }
  .toggle-tab {
    z-index: 2;
    position: fixed;
    right: -6px;
    top: 38%;
    width: 8.15%;
    max-width: 32px;
    text-align: center;
    font-size: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  .toggle-tab .tab-item {
    padding: 23px 7px 27px 3px;
    color: #fff;
    line-height: 1;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    background-size: 100% 100%;
  }
  .openOther {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    background-image: url("../assets/img/downLoad.png");
    background-size: 100% auto;
    background-color: rgba(0, 0, 0, 0.8);
  }
</style>
